<template>
    <div class="amap-page-container">
        <el-amap-search-box class="search-box"
          :search-option="searchOption"
          :on-search-result="onSearchResult"
        >
        </el-amap-search-box>
        <el-amap vid="amap" :zoom="zoom" :center="center" class="amap-demo" :plugin="plugins">
          <el-amap-ground-image v-for="(groundimage, index) in groundimages"
          :url="groundimage.url"
          :bounds="groundimage.bounds"
          :events="groundimage.events"
          :key="index"
          >
        </el-amap-ground-image>
        <el-amap-info-window
          :position="currentWindow.position"
          :content="currentWindow.content"
          :visible="currentWindow.visible"
        >
        </el-amap-info-window>
        <el-amap-marker v-for="(marker, index) in markers" :position="marker" :key="index" ></el-amap-marker>
        </el-amap>
        <div class="button">
          <ul>
            <li v-for="(item, index) of list" :key="index" @click="switchWindow(index)">{{item}}</li>
          </ul>
        </div>
        <router-link to="/search">
          <button class="router">跳转</button>
        </router-link>
    </div>
</template>
<script>
export default {
  data () {
    return {
      list: ['南天门', '噩梦之地', '你好骚啊', '旅店', '酒店', '睡不好', '腐朽的味道', '吃饭打游戏', '大观园', '吃到吐', '每天10圈', '西北地区'],
      zoom: 7,
      center: [110.919229, 21.659751],
      plugins: ['OverView', 'MapType', 'Scale', 'Toobar', 'Geolocation'],
      markers: [
        [110.919229, 21.659751]
      ],
      searchOption: {
        city: '茂名',
        citylimit: true
      },
      mapCenter: [110.919229, 21.659751],
      groundimages: [
        {
          url: '../../static/images/1.png',
          bounds: [[110.921588, 21.679574], [110.922119, 21.679016]],
          events: {
            click () {
              alert('click groundimage')
            }
          }
        },
        {
          url: '../../static/images/2.png',
          bounds: [[110.920531, 21.67923], [110.921089, 21.678821]],
          events: {
            click () {
              alert('click groundimage')
            }
          }
        },
        {
          url: '../../static/images/3.jpg',
          bounds: [[110.92272, 21.678567], [110.923851, 21.678004]],
          events: {
            click () {
              alert('click groundimage')
            }
          }
        }
      ],
      windows: [
        {
          position: [110.923111, 21.675925],
          content: '举头望明月',
          visible: true,
          events: {
            close () {
              alert('喷水表演怎么看都不腻')
            }
          }
        }, {
          position: [110.923444, 21.676414],
          content: '物理实验能让你抄到怀疑人生',
          visible: true,
          events: {
            close () {
              alert('四大神兽了解一哈')
            }
          }
        },
        {
          position: [110.922365, 21.676324],
          content: '取钱之道，不知道还以为去了趟怡红院',
          visible: true,
          events: {
            close () {
              alert('泉水叮咚，泉水叮咚')
            }
          }
        },
        {
          position: [110.922339, 21.676703],
          content: '大一主要休息睡觉的地方',
          visible: true,
          events: {
            close () {
              alert('每天迟到一分钟，一周少上一节课')
            }
          }
        },
        {
          position: [110.922403, 21.677351],
          content: '地方大风扇劲，人还少',
          visible: true,
          events: {
            close () {
              alert('这个电梯时真的慢，吃早餐都没时间')
            }
          }
        },
        {
          position: [110.922854, 21.67765],
          content: '有点挤，睡不好',
          visible: true,
          events: {
            close () {
              alert('大四狗放逐的地方')
            }
          }
        },
        {
          position: [110.922285, 21.678223],
          content: '这地方的味道就跟吸毒一样，会上瘾',
          visible: true,
          events: {
            close () {
              alert('所以能不去就尽量不去')
            }
          }
        },
        {
          position: [110.92191, 21.679489],
          content: '里面各个是人才，长的帅，打游戏还厉害',
          visible: true,
          events: {
            close () {
              alert('我真的起不来，摊在床上了')
            }
          }
        },
        {
          position: [110.920778, 21.679125],
          content: '这里妹子多，漂不漂亮就不知道了',
          visible: true,
          events: {
            close () {
              alert('门卫阿姨真的恨，靠近都不行')
            }
          }
        },
        {
          position: [110.920595, 21.679484],
          content: '不说了，让我点分外卖冷静下',
          visible: true,
          events: {
            close () {
              alert('阿姨，内个，手抖还没好啊')
            }
          }
        },
        {
          position: [110.921443, 21.680771],
          content: '不是我吹，半小时能跑10圈',
          visible: true,
          events: {
            close () {
              alert('垃圾，快跑2圈的垃圾')
            }
          }
        },
        {
          position: [110.92126, 21.681982],
          content: '这里没什么好处，就是拿外卖快',
          visible: true,
          events: {
            close () {
              alert('兄弟们，冲啊啊，篮球场占场子了喂')
            }
          }
        }
      ],
      slotWindow: {
        position: [121.5163285, 31.21515044]
      },
      currentWindow: {
        position: [0, 0],
        content: '',
        events: {},
        visible: false
      }
    }
  },
  mounted () {
    this.currentWindow = this.windows[0]
  },
  methods: {
    switchWindow (tab) {
      this.currentWindow.visible = false
      this.$nextTick(() => {
        this.currentWindow = this.windows[tab]
        this.currentWindow.visible = true
      })
    },
    addMarker: function () {
      let lng = 110.9 + Math.round(Math.random() * 1000) / 10000
      let lat = 21.681982 + Math.round(Math.random() * 500) / 10000
      this.markers.push([lng, lat])
    },
    onSearchResult (pois) {
      let latSum = 0
      let lngSum = 0
      if (pois.length > 0) {
        pois.forEach(poi => {
          let {lng, lat} = poi
          lngSum += lng
          latSum += lat
          this.markers.push([poi.lng, poi.lat])
        })
        let center = {
          lng: lngSum / pois.length,
          lat: latSum / pois.length
        }
        this.mapCenter = [center.lng, center.lat]
      }
    }
  }
}
</script>
<style scoped>
    .amap-page-container {
      position: relative;
    }
    .amap-demo {
      height: 500px;
      width: 100%;
    }
    .search-box {
      position: absolute;
      top: 25px;
      left: 20px;
    }
    .button ul li {
      width: 25%;
      height: 30px;
      background-color: chocolate;
      text-align: center;
      line-height: 30px;
      float: left;
    }
    .router {
      width:100%;
      height: 100%;
      background-color: brown;
      text-align: center;
    }
</style>
